<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
    <script src="./assets/iconfont.js"></script>
</head>

<body>
    <div class="wrapper d-flex flex-column">
        <header class="header">
            推荐页
        </header>
        <section id="app" class="content">
            <!-- 中间页面html结构 -->
            <div class="w">
                <div class="carousel-wrapper">
                    <!-- 轮播图结构 -->
                    <div class="carousel-container ">
                        <!-- 切换箭头 -->
                        <button class="carousel-control carousel-control-left carousel-control-hover">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-left"></use>
                            </svg>
                        </button>
                        <button class="carousel-control carousel-control-right carousel-control-hover">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-right"></use>
                            </svg>
                        </button>
                        <!-- 轮播图图片需要动态生成 -->
                        <div class="carousel-item">
                            <img src="https://tse2-mm.cn.bing.net/th/id/OIP.tXLPDc_5P-E7ca-KtD_UVAHaEK?pid=ImgDet&rs=1"
                                alt="">
                        </div>
                    </div>
                    <!-- 指示器 -->
                    <ul class="carousel-indicators d-flex">
                        <li data-slide-to="0" class="active"></li>
                        <li data-slide-to="1"></li>
                        <li data-slide-to="2"></li>
                    </ul>
                </div>
                <div class="recommend-playlist">
                    <!-- 推荐歌单结构 -->
                    <h3 class="recommend-playlist-header">推荐歌单<svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-arrow-right"></use>
                        </svg>
                    </h3>
                    <div class="recommend-playlist-container d-flex justify-content-between">
                        <!-- 推荐歌单需要动态生成，静态页面先手动复制 4 份-->
                        <div class="recommend-playlist-item d-flex flex-column hover">
                            <div class="recommend-playlist-cover">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1"
                                    alt="">
                                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                                    <use xlink:href="#icon-zanting"></use>
                                </svg>
                            </div>
                            <div class="recommend-playlist-title multi-text-omitted">
                                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
                            </div>
                        </div>
                        <div class="recommend-playlist-item d-flex flex-column hover">
                            <div class="recommend-playlist-cover">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1"
                                    alt="">
                                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                                    <use xlink:href="#icon-zanting"></use>
                                </svg>
                            </div>
                            <div class="recommend-playlist-title multi-text-omitted">
                                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
                            </div>
                        </div>
                        <div class="recommend-playlist-item d-flex flex-column hover">
                            <div class="recommend-playlist-cover">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1"
                                    alt="">
                                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                                    <use xlink:href="#icon-zanting"></use>
                                </svg>
                            </div>
                            <div class="recommend-playlist-title multi-text-omitted">
                                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
                            </div>
                        </div>
                        <div class="recommend-playlist-item d-flex flex-column hover">
                            <div class="recommend-playlist-cover">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1"
                                    alt="">
                                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                                    <use xlink:href="#icon-zanting"></use>
                                </svg>
                            </div>
                            <div class="recommend-playlist-title multi-text-omitted">
                                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
                            </div>
                        </div>
                        <div class="recommend-playlist-item d-flex flex-column hover">
                            <div class="recommend-playlist-cover">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1"
                                    alt="">
                                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                                    <use xlink:href="#icon-zanting"></use>
                                </svg>
                            </div>
                            <div class="recommend-playlist-title multi-text-omitted">
                                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="player-control d-flex justify-content-start">
            <!-- 页面底部html结构 -->
            <div class="player-control-songinfo d-flex justify-content-start">
                <!-- 歌曲信息 -->
                <div class="img ">
                    <img src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                        alt="">
                </div>
                <div class="songinfo d-flex flex-column align-items-start">
                    <span class="songname">歌曲一</span>
                    <span class="single-text-omitted singer">歌手2323232323232</span>
                </div>
            </div>
            <div class="player-control-unit d-flex justify-content-between">
                <div class="control">
                    <!-- 播放控制 -->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyiqu"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayiqu"></use>
                    </svg>
                </div>
                <div class="d-flex justify-content-between">
                    <!-- 播放进度和音量 -->
                    <div class="song-progress d-flex justify-content-between">
                        <span class="current-time">00:00</span>
                        <div class="progress" id='progress-bar'>
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                        <span class="total-time">00:00</span>
                    </div>
                    <div class="volume d-flex">
                        <svg class="icon volume-icon" aria-hidden="true">
                            <use xlink:href="#icon-yinliang"></use>
                        </svg>
                        <div class="progress" id='volume-bar'>
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <!-- 歌曲循环和列表 -->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiaoxunhuan"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangliebiao"></use>
                    </svg>
                </div>
            </div>
        </section>
        <!-- 新增播放列表 -->
        <section class="player-list">
            <h3 class="player-list-title">播放列表</h3>
            <ul class="player-list-ul">
                <li class="player-list-li d-flex justify-content-start pointer">
                    <div class="song-name">sd</div>
                    <div class="singer">da</div>
                    <div class="song-time">ad</div>
                </li>
                <li class="player-list-li d-flex justify-content-start pointer">
                    <div class="song-name">sd</div>
                    <div class="singer">da</div>
                    <div class="song-time">ad</div>
                </li>
            </ul>
        </section>
    </div>
</body>

</html>